<template>
  <a-modal v-model:open="openModel" width="1000px" :title="modelTitle" @ok="onFinish" ok-text="提交" cancel-text="取消">

      <a-tabs v-model:activeKey="activeTabKey">
          <a-tab-pane key="1" tab="实验员" v-if="ModelRoleEditId==0||ModelRoleEditId==1">
              <a-form
                  :model="technicianFormState"
                  v-bind="layout"
                  name="nest-messages"
                  :validate-messages="validateMessages">

                 <a-form-item v-for="{key,title,inputType,rules} in formFields[0]" :key="key" :name="[key]" :label="title" :rules="rules" >
                      <template v-if="inputType === 'input'">
                          <a-input v-model:value="technicianFormState[key]" />
                      </template>
                      <template v-else-if="inputType === 'input-number'">
                          <a-input-number v-model:value="technicianFormState[key]" />
                      </template>
                      <template v-else-if="inputType === 'textarea'">
                          <a-textarea v-model:value="technicianFormState[key]" />
                      </template>
                </a-form-item>
              </a-form>
          </a-tab-pane>
          <a-tab-pane key="2" tab="教师" force-render  v-if="ModelRoleEditId==0||ModelRoleEditId==2">
              <a-form
                      :model="teacherFormState"
                      v-bind="layout"
                      name="nest-messages"
                      :validate-messages="validateMessages">
                  <a-form-item v-for="{key,title,inputType,rules} in formFields[1]" :key="key" :name="[key]" :label="title" :rules="rules" >
                      <template v-if="inputType === 'input'">
                          <a-input v-model:value="teacherFormState[key]" />
                      </template>
                      <template v-else-if="inputType === 'input-number'">
                          <a-input-number v-model:value="teacherFormState[key]" />
                      </template>
                      <template v-else-if="inputType === 'textarea'">
                          <a-textarea v-model:value="teacherFormState[key]" />
                      </template>
                  </a-form-item>
              </a-form>
          </a-tab-pane>
          <a-tab-pane key="3" tab="学生" fore-render v-if="ModelRoleEditId==0||ModelRoleEditId==3">
              <a-form
                      :model="studentFormState"
                      v-bind="layout"
                      name="nest-messages"
                      :validate-messages="validateMessages">
                  <a-form-item v-for="{key,title,inputType,rules} in formFields[2]" :key="key" :name="[key]" :label="title" :rules="rules" >
                      <template v-if="inputType === 'input'">
                          <a-input v-model:value="studentFormState[key]" />
                      </template>
                      <template v-else-if="inputType === 'input-number'">
                          <a-input-number v-model:value="studentFormState[key]" />
                      </template>
                      <template v-else-if="inputType === 'textarea'">
                          <a-textarea v-model:value="studentFormState[key]" />
                      </template>
                  </a-form-item>
              </a-form>
          </a-tab-pane>
      </a-tabs>

  </a-modal>
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, ref, watch} from "vue";
import {$userInsertOne,$userEdit} from "./user.api"
//如果编辑，这个roleId=真正的roleId，如果是新增，这个值为0
const ModelRoleEditId=defineModel("modelRoleEditId")
//激活的TabKey,初始时要根据roleEditId修改值
const activeTabKey=ref("1");

//控制开关Model
const openModel = defineModel('openModel')
//控制里面的表单
const formFields = defineModel('formFields')
//新增的表单数据,编辑的提交表单
const technicianFormState = defineModel("technicianFormState");
const teacherFormState = defineModel("teacherFormState");
const studentFormState = defineModel("studentFormState");
const emit = defineEmits(['submitSuccess'])

// 监听 roleEditId 的变化
watch(ModelRoleEditId, (newValue, oldValue) => {
    console.log("imp",newValue)
    switch (newValue){
        case 0:
        case "0":
            activeTabKey.value="1"
            break;
        case 1:
        case "1":
            activeTabKey.value="1"
            break
        case 2:
        case "2":
            activeTabKey.value="2"
            break
        case 3:
        case "3":
            activeTabKey.value="3"
            console.log(activeTabKey.value)
            break

    }
});

// console.log(formFields)
//弹窗的标题,根据roleEditId来处理
const modelTitle = computed(() => {
    switch (ModelRoleEditId.value) {
        case "0":
        case 0:return "新增用户信息";
        case "1":
        case 1:return "编辑实验员信息";
        case "2":
        case 2: return "编辑老师信息";
        case "3":
        case 3: return "编辑学生信息"
        default:
            return "信息"
    }

});

const layout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 16 },
};
//定义的规则
const validateMessages = {
  required: '${label}不能为空',
  types: {
    email: '${label}不是一个有效的邮箱格式',
  },
  number: {
    range: '${label} 必须在${min}和${max}之间',
  },
};

import {message} from "ant-design-vue"
import {a} from "vitest/dist/suite-ynYMzeLu";
const onFinish = async () => {
    let onFinishResult
    if(ModelRoleEditId.value == "0"){//新增
        try{
            switch(activeTabKey.value){
                case "1":
                case 1:
                    technicianFormState.value.roleId=2
                    console.log("teacherFormStateAdd",technicianFormState)
                    onFinishResult= await $userInsertOne(technicianFormState.value,{})
                    break
                case "2":
                case 2:
                    teacherFormState.value.roleId=3
                    onFinishResult= await $userInsertOne(teacherFormState.value,{})
                    break
                case "3":
                case 3:
                    studentFormState.value.roleId=4
                    onFinishResult= await $userInsertOne(studentFormState.value,{})
                    break
            }
            const {code,message:responseMessage,data} = onFinishResult
            if(code===200){
                message.success(data)
               openModel.value=false
            }else{
                message.success(responseMessage)
                emit('submitSuccess')
            }
        }catch (e){
            message.error("新增用户失败")
        }
    }else{//编辑
        try{
            switch(ModelRoleEditId.value){
                case 1://tech
                case "1":
                    console.log(technicianFormState.value);
                    onFinishResult = await $userEdit(technicianFormState.value,{})
                    break
                case 2://tech
                case "2":
                    console.log(teacherFormState.value)
                    onFinishResult = await $userEdit(teacherFormState.value,{})
                    break
                case 3://tech
                case "3":
                    console.log(studentFormState.value);
                    onFinishResult = await $userEdit(studentFormState.value,{})
                    break
            }
            const {code,message:responseMessage,data} = onFinishResult
            if(code===200){
                message.success(data)
                openModel.value=false
                emit('submitSuccess')
            }else{
                message.success(responseMessage)
            }
        }catch (e){
            message.error("编辑用户失败失败")
        }

    }
};

</script>